<template>
  <NavBarCmp :leftArrow="false" />


  <van-tabs v-model:active="activeTabIndex" @click-tab="onClickTab" shrink class="video-tabs">

    <van-tab :title="item" v-for="(item, index) in tabNames" :key="index">
      <template #default>

        <VideoListCmp :activeTabIndex="activeTabIndex" />

      </template>
    </van-tab>
  </van-tabs>


  <TabBarCmp />
</template>


<script setup>

import { useHead } from '@unhead/vue'

useHead({
  title: '视频-猫眼电影'
})

import { ref } from 'vue'

const activeTabIndex = ref(0)

const tabNames = ref(['推荐', '热片解读', '新片预告'])

const onClickTab = ({ name }) => {
  console.log("onClickTab activeTabIndex", activeTabIndex.value);
  console.log("onClickTab", name);

};

</script>


<style scoped>
.video-tabs {
  margin-top: 50.5px
}

:deep(.van-tabs__wrap) {
  position: fixed;
  top: 50.5px;
  width: 100%;
  z-index: 10;
}
</style>
